<template>
  <body>
    <header class="layui-bg-cyan">
      <nav class="layui-container">
        <div class="layui-row">
          <div class="layui-col-md2 logo">
            <a href="javascript:;"
              ><img
                src="http://www.muzhuangnet.com/upload/201610/17/201610171329086541.png"
            /></a>
          </div>
          <div class="layui-col-md8 layui-hide-xs">
            <ul class="layui-nav layui-bg-cyan">
              <li class="layui-nav-item layui-this">
                <a href="">首页</a>
              </li>
              <li class="layui-nav-item">
                <a href="">PHP<span class="layui-badge-dot"></span></a>
              </li>
              <li class="layui-nav-item">
                <a href="">Ruby</a>
              </li>
              <li class="layui-nav-item">
                <a href="">Python</a>
              </li>
              <li class="layui-nav-item">
                <a href="">Discuz<span class="layui-badge-dot"></span></a>
              </li>
              <li class="layui-nav-item">
                <a href="">仓库<span class="layui-badge">9</span></a>
              </li>
              <li class="layui-nav-item">
                <a href="">关于</a>
              </li>
            </ul>
          </div>
          <div class="layui-col-md2 layui-hide-xs userinfoBox">
            <ul class="layui-nav layui-bg-cyan">
              <li class="layui-nav-item">
                <a href="javascript:;"
                  ><i class="layui-icon layui-icon-search search"></i
                ></a>
              </li>
              <li class="layui-nav-item" lay-unselect="">
                <a href="javascript:;"
                  ><img
                    src="https://t.cn/RCzsdCq"
                    class="layui-nav-img"
                  />Brother</a
                >
                <dl class="layui-nav-child">
                  <dd><a href="javascript:;">修改信息</a></dd>
                  <dd><a href="javascript:;">安全管理</a></dd>
                  <dd><a href="javascript:;">退了</a></dd>
                </dl>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

    <div class="layui-container">
      <div class="layui-row layui-col-space20">
        <div class="layui-col-md8">
          <div class="layui-row">
            <div class="layui-col-md12">
              <div class="layui-carousel" id="carousel">
                <div carousel-item>
                  <div>
                    <img
                      src="https://img.zcool.cn/community/0132815c2581eba80121df90120d8c.jpg@1380w"
                      alt=""
                    />
                  </div>
                  <div>
                    <img
                      src="https://img.zcool.cn/community/01cdfb5c244470a8012029ac59da4c.png@1380w"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-col-md12 margin20"></div>
            <div class="layui-col-md12">
              <div class="main zdbox">
                <div class="subject">
                  <b>[置顶]</b
                  ><a
                    href="javascript:;"
                    title="用DTcms做一个独立博客网站（响应式模板）"
                    >用layui做一个独立博客网站（响应式模板）</a
                  ><em>2018-12-28 11:53:24 发布</em>
                </div>
                <div class="content">
                  我是熊五，风格迥异的四个我，有着不同的个性，不同的人格，甚至不同的职业。
                  行险解秘专注探险的我，朝阳蓬勃酷爱嘻哈的我，精工巧匠专注纹身的我，文墨生花文艺气息满满的我。
                  亦是我，亦非我，我是不一样的烟火。
                </div>
              </div>
            </div>
            <div class="layui-col-md12 margin20"></div>
            <div
              class="layui-col-md12"
              v-for="item in list"
              v-bind:key="item.id"
            >
              <div class="main list">
                <div class="subject">
                  <a href="javascript:;" class="caty">[PHP]</a
                  ><a
                    href="javascript:;"
                    title="用DTcms做一个独立博客网站（响应式模板）"
                    >{{ item.title }}</a
                  ><em>2018-12-28 11:53:24 发布</em>
                </div>
                <div class="content layui-row">
                  <div class="layui-col-md4 list-img">
                    <a href="javascript:;"
                      ><img
                        src="http://www.muzhuangnet.com/upload/201610/18/201610181739277776.jpg"
                    /></a>
                  </div>
                  <div class="layui-col-md8">
                    <div class="list-text">
                      {{ item.content }}
                    </div>
                    <div class="list-stat layui-row">
                      <div class="layui-col-xs3 layui-col-md3 Label">
                        <i class="layui-icon layui-icon-note"></i>
                        <a href="javascript:;">{{ item.author }}</a>
                        <!-- <a href="javascript:;">Discuz</a> -->
                      </div>

                      <div class="layui-col-xs3 layui-col-md3">
                        <i class="layui-icon layui-icon-reply-fill"></i>
                        <em>12条评论</em>
                      </div>

                      <div class="layui-col-xs3 layui-col-md3">
                        <i class="layui-icon layui-icon-read"></i>
                        <em>12次阅读</em>
                      </div>

                      <div class="layui-col-xs3 layui-col-md3 alink">
                        <button
                          :data="item.id"
                          @click="$router.push(`/about/${item.id}`)"
                          href="javascript:;"
                          class="layui-btn layui-btn-xs"
                        >
                          阅读原文1
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="layui-col-md12 margin20"></div>

            <div class="layui-col-md12 margin20"></div>
            <div class="layui-col-md12" id="pages"></div>
          </div>
        </div>
        <div class="layui-col-md4">
          <div class="layui-row">
            <div class="layui-col-md12">
              <div class="layui-card">
                <div class="layui-card-header">
                  <span class="layui-breadcrumb" lay-separator="|">
                    <a href="javascript:;">站点统计</a>
                    <a href="javascript:;">联系站长</a>
                  </span>
                </div>
                <div class="layui-card-body" id="stat" style="display: none">
                  <table class="layui-table">
                    <colgroup>
                      <col width="120" />
                      <col width="230" />
                    </colgroup>
                    <tbody>
                      <tr>
                        <td>运行时间：</td>
                        <td>856 天</td>
                      </tr>
                      <tr>
                        <td>发表文章：</td>
                        <td>1024 篇</td>
                      </tr>
                      <tr>
                        <td>注册用户：</td>
                        <td>3689 人</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="layui-card-body" id="binfo">
                  <table class="layui-table">
                    <colgroup>
                      <col width="120" />
                      <col width="230" />
                    </colgroup>
                    <tbody>
                      <tr>
                        <td>QQ：</td>
                        <td>27941662</td>
                      </tr>
                      <tr>
                        <td>Wechat：</td>
                        <td>SCHOOP</td>
                      </tr>
                      <tr>
                        <td>qqGroup：</td>
                        <td>88888888</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="layui-col-md12 margin20"></div>
            <div class="layui-col-md12">
              <div class="layui-card">
                <div class="layui-card-header">
                  <span> 热门文章 </span>
                </div>
                <div class="layui-card-body">
                  <table class="layui-table" lay-skin="nob">
                    <tbody>
                      <tr>
                        <td>
                          <a href="javascript:;"
                            >用layui做一个独立博客网站（响应式模板）</a
                          >
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <a href="javascript:;"
                            >用layui做一个独立博客网站（响应式模板）</a
                          >
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <a href="javascript:;"
                            >用layui做一个独立博客网站（响应式模板）</a
                          >
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <a href="javascript:;"
                            >用layui做一个独立博客网站（响应式模板）</a
                          >
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <a href="javascript:;"
                            >用layui做一个独立博客网站（响应式模板）</a
                          >
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <a href="javascript:;"
                            >用layui做一个独立博客网站（响应式模板）</a
                          >
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <a href="javascript:;"
                            >用layui做一个独立博客网站（响应式模板）</a
                          >
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <a href="javascript:;"
                            >用layui做一个独立博客网站（响应式模板）</a
                          >
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <a href="javascript:;"
                            >用layui做一个独立博客网站（响应式模板）</a
                          >
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <a href="javascript:;"
                            >用layui做一个独立博客网站（响应式模板）</a
                          >
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <a href="javascript:;"
                            >用layui做一个独立博客网站（响应式模板）</a
                          >
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="layui-col-md12 margin20"></div>
            <div class="layui-col-md12">
              <div class="layui-card">
                <div class="layui-card-header">
                  <span> 捐助本站 </span>
                </div>
                <div class="layui-card-body" style="text-align: center">
                  <img
                    src="https://cdn.layui.com/upload/2017_8/168_1501894831075_19619.jpg"
                    style="display: inline-block"
                  />
                  <br />
                  <p>无论多少，都是心意!</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 尾部 -->
    <div class="footer"></div>
    <footer class="layui-bg-cyan">
      <div class="layui-container">
        <div class="layui-row">
          <p>
            本站部分内容来源于网络，若侵犯到您的利益，请联系站长删除！谢谢！Powered
            By
            <a
              href="https://gitee.com/XzcGroup/XzcBlogTemplate"
              target="_blank"
              title="XzcBlogTemplate"
              >XzcBlogTemplate</a
            >
          </p>
        </div>
      </div>
    </footer>
  </body>
</template>

<script>
// @ is an alias to /src
import "../assets/css/common.css";
import "../assets/layui/css/layui.css";
import "../assets/layui/layui.all.js";
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    async save() {
      const res = await this.$http.get("test");
      console.log(res.data);
      this.list = res.data;
    },
  },
  created() {
    this.save();
  },
};
</script>
